<template>
  <div class="header">
    <div class="container">
      <div class="logo">
        <img :src="logo" alt="">
      </div>
      <div class="header-nav" id="headerNav">
        <div class="item" :key="index" v-for="(item,index) of headerNavList ">
          <span class="title">{{ item.text }}</span>
          <div class="down-menu">
            <div class="container">
              <div class="down-menu-item" :key="index_down" v-for="(item_down,index_down) of item.downMenu">
                <div class="img">
                  <img
                      :src="item_down.imgUrl"
                      alt="">
                </div>
                <span class="down-menu-title">{{ item_down.title }}</span>
                <span class="price">{{ item_down.price }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <span class="title">服务</span>
        </div>
        <div class="item">
          <span class="title">社区</span>
        </div>
      </div>
      <div class="header-search">
        <div class="search">
          <input type="text" id="searchInput" :placeholder="placeholder" >
          <div class="search-down">
            <span v-for="(item,index ) of searchProposal" :key="index">{{ item }}</span>
          </div>
        </div>
        <div class="search-btn">
          <i class="iconfont icon-sousuo5 "></i>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import $ from 'jquery';

export default {
  name: "Header",
  data() {
    return {
      logo: require('/src/assets/images/logo-mi2.png'),
      headerNavList: [
        {
          text: '小米手机',
          downMenu: [
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米MIX FOLD',
              price: '9999元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a359e9346e3c6ee8c9d8389e3fd9458.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米11 Ultra',
              price: '5999元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1c45eadcedeb27b1cafca0359422da9.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米11 Pro',
              price: '4999元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/56e3379b5422cb06e5c8a0c546445606.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米11 青春版',
              price: '2299元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9149ef3ba2c9025a4a21c98ae793808.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米10S',
              price: '3299元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/963679eaf3937351e154600ab3448460.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米11',
              price: '3999元起'
            },
          ]
        },
        {
          text: 'Redmi 红米',
          downMenu: [
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/acd0f27496ccdf81ef42124c35e8bfc4.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'K40 游戏增强版',
              price: '1999元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d07671f25a2b3a6c3d4fac189f28fbe9.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'K40 Pro 系列 ',
              price: '2799元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ecebd50c7840bb03d7b5e3bfe4d439c2.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi K40',
              price: '1999元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/584add2c9cfdb9eefe7b642bf191773a.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi Note 9 系列',
              price: '999元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/81808cd191332114f44d8d0cb0d0813a.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi K30S 至尊纪念版',
              price: '2299元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi K30 至尊纪念版',
              price: '1999元起'
            },
          ]
        },
        {
          text: '电视',
          downMenu: [
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8c87fdc4bcfd081ac240f7af1417ce60.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi MAX 86” 超大屏电视',
              price: '9999元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/174a2f9256a44b98f9e08bbe30528329.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米电视大师 82英寸至尊纪念版',
              price: '49999元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e513ac03d0ebb594bf42f7d6b1b44944.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米电视大师 82英寸',
              price: '11999元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/932b583c6eccd8aabfa0771f8a854940.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米透明电视',
              price: '49999元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ea3390a20547c7298a258528e4aa69ad.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米电视 大师 65英寸OLED',
              price: '9999元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0112cb7e2ea8489fbd36ce3a781d5232.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi 智能电视 MAX 98\'',
              price: '19999元'
            },
          ]
        },
        {
          text: '笔记本',
          downMenu: [
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/95abdace7ad322e6237c98a61d967774.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米笔记本Pro 14',
              price: '5299元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/705cde5b7afce7ee89d95d1a35938778.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米笔记本Pro 15',
              price: '6499元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7872a4195d666f08bef0877562dd7fe7.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'RedmiBook Pro 14',
              price: '4699元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/72efefb3f76c2ec1ef749f860ff232b9.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'RedmiBook Pro 15',
              price: '4999元起'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bfdd3b985b4a9da58a1f5a861c5895f.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi G 游戏本',
              price: ''
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3e6c9a677acbb3b0c75d4d0d83e8a695.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'RedmiBook 16',
              price: '5499元'
            },
          ]
        },
        {
          text: '家电',
          downMenu: [
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7a4e3ff7919ca2407ad970b78abd09a.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: '米家风冷对开门冰箱 483L',
              price: '2399元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/65df9e92c06dcd148de5f0eb13e16ea2.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '米家扫拖机器人1T',
              price: '2299元'
            },
            {
              imgUrl: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/11b8bca444aba2994fe852993eac9203.png?thumb=1&w=160&h=110',
              title: '米家互联网洗烘一体机10kg',
              price: '1899元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c82798dbbc793c8bd52929dbe86b316f.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: ' ',
              price: ''
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/48d69ed4cc41d5c9d33bdeefd7f1da69.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米净水器S1 800G',
              price: '2499元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/40ad6e8398095e97309a5538b516a2de.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: '米家空气净化器3  高效除菌',
              price: '899元'
            },
          ]
        },
        {
          text: '路由器',
          downMenu: [
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a759fa795d749f0538cfd2a15890027.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米路由器AX6000',
              price: '599元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/54de949334c3d794a6ca55b76e4bb379.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi路由器 AX6',
              price: '329元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2815a0a208be362cba673aae9a1f9c93.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米路由器AX9000',
              price: '999元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/27da43294889d049a111e5ff2cdfafe7.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米路由器 AX1800',
              price: '329元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/359d3c63cc159949d8fe147a11b4bc40.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米AIoT路由器AX3600',
              price: '499元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aa1e0a4860cf40d34e1192d86691c82c.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi路由器AC2100',
              price: '169元'
            },
          ]
        },
        {
          text: '智能硬件',
          downMenu: [
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2b87ae4a36beef69bb2018eb1f8bce9b.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米全自动智能门锁',
              price: '1799元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c6a5f44fd12afa182367ed8d1716421.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi小爱触屏音箱Pro8',
              price: '499元'
            },
            {
              imgUrl: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f6e585a4bf5c0f744ca60f19ecd6fadf.jpg?thumb=1&w=160&h=110',
              title: '小米小爱触屏音箱',
              price: '219元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/17c0c91317ec0def3ecc072fa9480192.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi小爱音箱 Play',
              price: '89元'
            },
            {
              imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/12cdacc6e4f343861d31345036cc3b46.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '查看全部#智能硬件',
              price: '查看全部'
            },
          ]
        },


      ],
      searchProposal: ['全部商品', '小米11', '小米手机', '洗衣机', '空调', '耳机', '净水器'],
      defaultWords: [
          {
        "word": "Redmi K30",
        "block_id": 0,
        "action": {
          "type": "none",
          "path": "",
          "log_code": "31pcsearchother000000#t=normal\u0026act=other\u0026page=search\u0026bid=3468989.1",
          "extra": ""
        }
      }, {
        "word": "小米10",
        "block_id": 0,
        "action": {
          "type": "none",
          "path": "",
          "log_code": "31pcsearchother000000#t=normal\u0026act=other\u0026page=search\u0026bid=3468988.1",
          "extra": ""
        }
      }, {
        "word": "Redmi Note 8",
        "block_id": 0,
        "action": {
          "type": "none",
          "path": "",
          "log_code": "31pcsearchother000000#t=normal\u0026act=other\u0026page=search\u0026bid=3468986.1",
          "extra": ""
        }
      }, {
        "word": "小米CC9",
        "block_id": 0,
        "action": {
          "type": "none",
          "path": "",
          "log_code": "31pcsearchother000000#t=normal\u0026act=other\u0026page=search\u0026bid=3468985.1",
          "extra": ""
        }
      }, {
        "word": "黑鲨游戏手机",
        "block_id": 0,
        "action": {
          "type": "none",
          "path": "",
          "log_code": "31pcsearchother000000#t=normal\u0026act=other\u0026page=search\u0026bid=3468990.1",
          "extra": ""
        }
      }, {
        "word": "小米电视",
        "block_id": 0,
        "action": {
          "type": "none",
          "path": "",
          "log_code": "31pcsearchother000000#t=normal\u0026act=other\u0026page=search\u0026bid=3468984.1",
          "extra": ""
        }
      }, {
        "word": "小米笔记本",
        "block_id": 0,
        "action": {
          "type": "none",
          "path": "",
          "log_code": "31pcsearchother000000#t=normal\u0026act=other\u0026page=search\u0026bid=3468983.1",
          "extra": ""
        }
      }, {
        "word": "路由器",
        "block_id": 0,
        "action": {
          "type": "none",
          "path": "",
          "log_code": "31pcsearchother000000#t=normal\u0026act=other\u0026page=search\u0026bid=3468982.1",
          "extra": ""
        }
      }, {
        "word": "小爱音箱",
        "block_id": 0,
        "action": {
          "type": "none",
          "path": "",
          "log_code": "31pcsearchother000000#t=normal\u0026act=other\u0026page=search\u0026bid=3468981.1",
          "extra": ""
        }
      }, {
        "word": "净水器",
        "block_id": 0,
        "action": {
          "type": "none",
          "path": "",
          "log_code": "31pcsearchother000000#t=normal\u0026act=other\u0026page=search\u0026bid=3468980.1",
          "extra": ""
        }
      }],
      placeholder:'',
    }
  },
  mounted() {
    this.$nextTick(() => {
      $('.search-down').hide()
      //下拉菜单
      $('#headerNav>.item').bind({
        'mouseenter': function () {
          $(this).find('.down-menu').stop(200).slideDown().parent().siblings().find('.down-menu').stop().slideUp()
          $(this).find('.title').css({
            'color': '#ff6700'
          })
        },
        'mouseleave': function () {
          $(this).find('.down-menu').stop().slideUp()
          $(this).find('.title').css({
            'color': '#333333'
          })
        }
      });
      //点击搜索框
      $('.header-search').bind({
        'click': function () {
          $(this).css('border', '1px solid #FF6700');
          $('.search-btn').css('borderLeft', '1px solid #FF6700');
          $('#searchInput').focus();
          $('.search-down').show()
        },

      })
      $('#searchInput').bind('blur', function () {
        $('.header-search').css('border', '1px solid #e0e0e0');
        $('.search-btn').css('borderLeft', '1px solid #e0e0e0');
        $('.search-down').hide()
      })
    })
    let count=0;
    this.placeholder=this.defaultWords[count].word;
    setInterval(()=>{
      count++;
      if (count===this.defaultWords.length-1){
        count=0;
      }
      this.placeholder=this.defaultWords[count].word;
    },2000)
  }


}
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 100px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
      width: 56px;
      height: 56px;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
        transition: all 1s;

        &:hover {
          transform: scale(0.8);
          transition: all 1s;
        }
      }
    }

    .header-nav {
      display: flex;
      height: 100%;
      align-items: center;
      width: 850px;
      padding-left: 161px;

      .item {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 10px;

        > span {
          font-size: 16px;
          color: #333333;
          transition: color 0.5s;

          &:hover {
            cursor: pointer;
          }
        }

        .down-menu {
          height: 229px;
          width: 100%;
          position: absolute;
          top: 100px;
          background-color: white;
          border-top: 1px solid #e0e0e0;
          left: 0;
          box-shadow: 0 3px 4px rgb(0 0 0/18%);
          display: none;
          z-index: 99;
          .container {
            margin: 0 auto;
            height: 100%;
            display: flex;
            align-items: center;

            .down-menu-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;
              padding: 0 20px;

              .img {
                width: 160px;
                height: 110px;
                margin-bottom: 16px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .down-menu-title {
                font-size: 12px;
                color: #333333;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                max-width: 160px;
              }

              .price {
                color: #ff6700;
                font-size: 12px;
              }

              &:after {
                content: '';
                position: absolute;
                right: 0;
                height: 100px;
                width: 1px;
                background-color: #e0e0e0;
              }

              &:last-child {
                &:after {
                  content: '';
                  position: absolute;
                  right: 0;
                  height: 100px;
                  width: 1px;
                  background-color: transparent;
                }
              }
            }
          }
        }
      }

    }

    .header-search {
      height: 50px;
      width: 296px;
      border: 1px solid #E0E0E0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all .5s;

      &:hover {
        border: 1px solid #B0B0B0;

        .search-btn {
          border-left: 1px solid #B0B0B0;
        }
      }

      .search {
        padding: 0 10px;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;

        input {
          outline: unset;
          border: unset;
          width: 100%;
        }

        .search-down {
          width: 100%;
          background-color: #FFFFFF;
          position: absolute;
          left: 0;
          top: 49px;
          display: flex;
          flex-direction: column;
          border-left: 1px solid #FF6700;
          border-right: 1px solid #FF6700;
          border-bottom: 1px solid #FF6700;
          z-index: 99;

          span {
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;

            &:hover {
              background-color: #FAFAFA;
            }
          }
        }
      }

      .search-btn {
        height: 100%;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #e0e0e0;
        transition: all .5s;
        flex-shrink: 0;

        &:hover {
          background-color: #ff6700;

          i {
            color: white;
          }
        }

        i {
          font-size: 18px;
          color: #616161;
        }
      }
    }
  }
}
</style>